<template>
    <div class="app-container">
      <el-form :model="queryParams" class="frominfo" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <div class="from-item">
          <el-form-item label="微信名称" prop="wcName">
            <el-input v-model="queryParams.wcName" @keyup.enter.native="handleQuery" placeholder="请输入助手微信名称" clearable/>
          </el-form-item>
          <!-- <el-form-item label="微信备注" prop="wcNoteName">
            <el-input v-model="queryParams.wcNoteName" @keyup.enter.native="handleQuery" placeholder="请输入微信备注" clearable/>
          </el-form-item> -->
          <el-form-item label="聊天时间" prop="lastChatTime">
            <el-date-picker v-model="chatTime" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
          <!-- <el-form-item label="标签" prop="lable">
            <el-select v-model="queryParams.interState" placeholder="请选择" clearable>
              <el-option v-for="dict in dict.type.sys_network_status" :key="dict.value" :label="dict.label" :value="dict.value"/>
            </el-select>
          </el-form-item> -->
          <el-form-item label="是否在网" prop="interState">
            <el-select v-model="queryParams.interState" placeholder="请选择" clearable>
              <el-option v-for="dict in dict.type.sys_network_status" :key="dict.value" :label="dict.label" :value="dict.value"/>
            </el-select>
          </el-form-item>
        </div>
        <div class="from-Btn">
          <el-form-item>
              <el-button class="blue-button" type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
  
      <el-table v-loading="loading" :data="wcFriendInfoList" :header-cell-style="{ background: '#fcfcfd', color: '#000' }" :border="false">
        <el-table-column label="已添加营销助手" prop="wcName" align="center" :show-overflow-tooltip="true"/>
        <!-- <el-table-column label="好友微信号" prop="wcUserNumber" align="center" :show-overflow-tooltip="true"/> -->
        <el-table-column label="微信ID" prop="wcId" align="center" :show-overflow-tooltip="true"/>
        
        <el-table-column label="所属地区" prop="region" align="center" :show-overflow-tooltip="true"/>
        <el-table-column label="最近聊天时间" prop="lastChatTime" align="center" :show-overflow-tooltip="true" width="180">
            <template slot-scope="scope">
                <span>{{ parseTime(scope.row.lastChatTime, '{y}-{m}-{d}') }}</span>
            </template>
        </el-table-column>
        <el-table-column align="center" width="120" class-name="small-padding fixed-width">
          <template slot="header">
            <span>AI功能</span>
            <el-tooltip class="item" effect="dark" content="进入操作" placement="top">
              <i class="el-icon-warning" style="color:#818e96;"></i>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <el-switch :active-value="1" :inactive-value="0" v-model="scope.row.openAi" @change="getEide(scope.row)"></el-switch>
          </template>
        </el-table-column>
      </el-table>
  
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>

    </div>
  </template>
  
  <script>
  import request from '@/utils/request'
  export default {
    name: "WcFriendInfo",
    dicts: ['sys_network_status'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        selectAll:false,
        selection:[],
        chatTime:[],
        // 微信好友信息表格数据
        wcFriendInfoList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          wcUserId: null,
          wcName: null,
          interState: null,
          beginTime: null,
          endTime: null,
        },
      };
    },
    created() {
      
    },
    mounted(){
      //console.log(this.$route.query.wxid)
      this.queryParams.wcUserId = this.$route.query.wxid;
      this.getList();
    },
    watch: {
      // 监听$route对象的变化来更新userId
      '$route': function(to, from) {
        //console.log(to)
        this.queryParams.wcUserId = this.$route.query.wxid;
      }
    },
    methods: {
      /** 查询微信好友信息列表 */
      getList() {
        this.loading = true;
        listWcFriendInfo(this.queryParams).then(res => {
          if (res['success']) {
            const dt = res['data'];
            this.total = dt['total'];
            this.wcFriendInfoList = dt['records'];
          }
          this.loading = false;
        });
        setTimeout(()=>{
          this.loading = false;
        },2000)
      },
      getEide(row){
        var openAi=row.openAi?1:0
        editOpenAi({id:row.id,openAi}).then(res => {
           //console.log(res)
           this.$modal.msgSuccess("修改成功");
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.beginTime=null
        this.queryParams.endTime=null
        if(this.chatTime!=''&&this.chatTime!=null){
          this.queryParams.beginTime=this.chatTime[0]+' 00:00:00'
          this.queryParams.endTime=this.chatTime[1]+' 23:59:59'
        }
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.chatTime=[]
        this.handleQuery();
      },
    }
  };
  
  /** js请求 调用 */
  
  // 查询微信好友信息列表
  export function listWcFriendInfo(query) {
    return request({
      url: '/wxassistant/wcassist_xq/page',
      method: 'get',
      params: query
    })
  }
  
  // 修改助手信息
  export function editOpenAi(data) {
    return request({
      url: '/arbit/wcuser_info/editOpenAi',
      method: 'POST',
      data: data
    })
  }
  </script>
  <style scoped lang="scss">
    .app-container{
      background-color: #f6f9fb;
    }
    .frominfo{
      display: flex;background-color: #fff;padding: 10px;padding-bottom: 0; margin-bottom: 20px;
      .from-item{
        display: flex;flex-wrap: wrap;
      }
      .from-Btn{
        display: flex;flex-direction: column;align-items: center;justify-content: center;width: 20%;
      }
    }
    .mb8{
      margin-bottom: 20px;
    }
    .blue-button {
      color: #fff;
      background-color: #0078fb;
      border-color: #0078fb;
    }
    .dia-box{
        padding: 20px;
        display: flex;
        flex-direction: column;
      .dia-box-search{
        display: flex;
        align-items: center;
        margin-bottom: 10px;
      }
      .dia-box-lable{
        width:90%;
        border-radius: 5px;
        border:1px solid #eee;
        min-height: 100px;
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
        margin-bottom: 20px;
        .lable-box{
          padding: 0 5px;
          height: 20px;
          line-height: 20px;
          margin-right: 10px;
          border: 1px solid #dcdcdc;
          background-color: #ebf4ff;
          font-size: 12px;
          border-radius: 3px;
        }
        .select{
          color: #fff;
          background-color: #4095e5;
        }
      }
    }
    .dialog-footer{
      display: flex;
      justify-content: center;
    }
  </style>
  